<template>
	<view>
		<view class="top">
			<searchTemp class="search"  @childByValue="childByValue"></searchTemp>
		</view>
		<view class="kehu-lists">
			<view v-for="(item,index) in myCustomerList" :key="item.news_Id">
				<view class="kehu-item">
					<view class="kehu-left">
						<view class="touxiang-box" @click="toKehuxiangqing(item.news_Id)">
							<image :src="imgurl+'/touxiang.png'" mode="aspectFit" class="touxiang-image"></image>
							<view v-if="item.oper_Id=='男'">
								<image :src="imgurl+'/nanxing.png'" mode="aspectFit" class="xingbie"></image>
							</view>
							<view v-else>
								<image :src="imgurl+'/nuxing.png'" mode="aspectFit" class="xingbie"></image>
							</view>
						</view>
						<view class="kehu-message" @click="toYuyue(item)">
							<view class="kehu-message-top">
								<view class="kehu-name">
									{{item.news_Tit}}
								</view>
								<view v-if="item.effe_Flg=='未认证'"><!-- 实名认证状态 -->
									<image :src="imgurl+'/shi.png'" mode="aspectFit" class="imgchange"></image>
								</view>
								<view v-else><!-- 实名认证状态 -->
									<image :src="imgurl+'/shi.png'" mode="aspectFit" class="label-image"></image>
								</view>
								<view v-if="item.show_Flg=='未认证'"><!-- 合格投资者认证状态 -->
									<image :src="imgurl+'/he.png'" mode="aspectFit" class="imgchange"></image>
								</view>
								<view v-else><!-- 合格投资者认证状态 -->
									<image :src="imgurl+'/he.png'" mode="aspectFit" class="label-image"></image>
								</view>
								<view v-if="item.check_Flg=='未认证'"><!-- 专业投资者认证状态 -->
									<image :src="imgurl+'/zhuan.png'" mode="aspectFit" class="imgchange"></image>
								</view>
								<view v-else><!-- 专业投资者认证状态 -->
									<image :src="imgurl+'/zhuan.png'" mode="aspectFit" class="label-image"></image>
								</view>
							</view>
							<view class="kehu-message-bottom">
								<image :src="imgurl+'/xingjikehu.png'" mode="aspectFit"></image>
								<view v-if="item.tag_Sign!=null" class="star">
									<!-- 一星客户 -->
									{{item.tag_Sign}}星客户
								</view>
								<view class="telephone">
									<!-- 1233211234567 -->
									{{item.author}}
								</view>
							</view>
						</view>
					</view>
					<!-- <view  class="kehu-center" @click="toYuyue(item)"></view> -->
					<image @click="toCallPhone(item.author)" :src="imgurl+'/dianhuan.png'" mode="" class="kehu-right"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import searchTemp from '../../../components/search-temp.vue'
	import global_ from '../../../components/tool/homePageQuery.vue'
	export default {
		components: {
			searchTemp
		}, 
		data() {
			return {
				imgurl:'http://ai.ylcaifu.com/appimg/images/5.0-%E6%88%91%E7%9A%84-%E7%90%86%E8%B4%A2%E5%B8%88/5.1-%E6%88%91%E7%9A%84%E5%AE%A2%E6%88%B7%EF%BC%88CRM%EF%BC%89/android/drawable-xhdpi',
				token:uni.getStorageSync('token_key'),
				myCustomerList:[],
				data: [],
				loadMoreText: "加载中...",
				showLoadMore: false,
				max: 0
			};
		},
		onShow() {
			console.log("客户中心页面刷新-----------");
			this.getCustomerList();
		},
		onLoad() {
			uni.setStorageSync('searchPlaceholderText','请输入用户名或手机号');
			console.log("刷新页面----------------------------")
			//this.getCustomerList();
			uni.request({
				method: 'POST',
				url: global_.api.queryMycustomer,
				header : {'content-type':'application/x-www-form-urlencoded'},
				data: {
					token: this.token
				},
			 
				dataType: 'json',
				success: (res) => {
					this.myCustomerList=res.data.data.customerList;
					console.log("我的客户列表----"+JSON.stringify(this.myCustomerList));
				},
				fail: (res) => {
					console.log("..............................................fail");
					console.log(JSON.stringify(res));
					//this.text = 'request fail';
				},
				complete: (res) => {
					//停止当前页面下拉刷新。
					/* uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh(); */
				}
			})
		},
		onPullDownRefresh:function(){
			console.log("下拉刷新客户列表-----")
			this.getCustomerList();
			this.initData();
		},
		onUnload() {
			this.max = 0,
			this.data = [],
			this.loadMoreText = "加载更多",
			this.showLoadMore = false;
		},
		onNavigationBarButtonTap (){
			uni.navigateTo({
				url: './xinjiankehu/xinjiankehu',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},methods:{
			toYuyue(item){
				console.log('进入了预约页面');
				console.info("跳转传参："+JSON.stringify(item))
				var obj = new Object();
				obj.custno = item.news_Id;
				obj.name = item.news_Tit;
				this.$eventHub.$emit('fire',obj);
				uni.navigateBack({  
					delta: 1 
				});  
				this.$eventHub.$off('fire');
			},
			initData(){
				setTimeout(() => {
					this.max = 0;
					this.data = [];
					let data = [];
					this.max += 10;
					for (var i = this.max - 9; i < this.max + 1; i++) {
						data.push(i)
					}
					this.data = this.data.concat(data);
					uni.stopPullDownRefresh();
				}, 300);
			},
			toKehuxiangqing(news_Id){
				uni.navigateTo({
					url: './kehuxiangqing/kehuxiangqing?news_Id='+news_Id,
					// url:'https://www.baidu.com'
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			childByValue: function(childValue) {
				// childValue就是子组件传过来的值
				this.searchValue = childValue
				console.log("客户列表条件查询===this.searchValue---"+this.searchValue);
				if(childValue!='' && childValue !=null){
					uni.request({
						method: 'POST',
						url: global_.api.queryLikeCustomer,
						header : {'content-type':'application/x-www-form-urlencoded'},
						data: {
							token: this.token,
							queryContent:childValue
						},
					  
						dataType: 'json',
						success: (res) => {
							this.myCustomerList=res.data.data.customerList;
							//console.log("我的客户列表----"+JSON.stringify(this.myCustomerList));
						},
						fail: (res) => {
							console.log("..............................................fail");
							console.log(JSON.stringify(res));
							//this.text = 'request fail';
						},
						complete: (res) => {
							//停止当前页面下拉刷新。
							uni.hideNavigationBarLoading();
							uni.stopPullDownRefresh();
						}
					})
				}else{
					this.getCustomerList();
				}
			 	
				//this.productName=childValue;
				//this.fresh(this.id);
			},
			getCustomerList(){
				uni.request({
					method: 'POST',
					url: global_.api.queryMycustomer,
					header : {'content-type':'application/x-www-form-urlencoded'},
					data: {
						token: this.token
					},
				 
					dataType: 'json',
					success: (res) => {
						this.myCustomerList=res.data.data.customerList;
						console.log("我的客户列表----"+JSON.stringify(this.myCustomerList));
					},
					fail: (res) => {
						console.log("..............................................fail");
						console.log(JSON.stringify(res));
						//this.text = 'request fail';
					},
					complete: (res) => {
						//停止当前页面下拉刷新。
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh();
					}
				})
			},
			toCallPhone(phoneNo){
				uni.makePhoneCall({
					phoneNumber: phoneNo //仅为示例
				});
			}
		}
	}
</script>

<style>
	.kehu-lists{
		background: rgb(255,255,255);
	}
	.kehu-item{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 20upx;
		border-bottom: 1px solid rgb(0,0,0,0.05) ;
		justify-content: space-between;
		height: 65px;
		
	}
	.kehu-left,.kehu-message-bottom{
		display: flex;
		flex-direction: row;
		align-items: center;
		
	}
	.touxiang-box{
		position: relative;
		margin-right: 20upx;
	}
	.touxiang-box .xingbie{
		position: absolute;
		width: 14px;
		height: 12px;
		
		
		bottom: 0;
		right: 0;
	}
	.kehu-left .touxiang-image{
		width: 45px;
		height: 45px;
		
	}
	.kehu-right{
		width: 25px;
		height: 25px;
	}
	.kehu-message-top{
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 16px;
		line-height: 30px;
		
	}
	.kehu-message-top image{
		width: 16px;
		height: 16px;
		margin-left: 8upx;
	}
	.kehu-message-bottom{
		line-height: 15px;
		font-size:10px ;
	}
	.kehu-message-bottom image{
		width: 12px;
		height: 9px;
	}
	.star{
		
		color:#C49C5A ;
	}
	.imgchange{
		-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;
	}
	.telephone{
		margin-left: 23upx;
		color: #999999;
	}
	.kehu-message-right{
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 16px;
		line-height: 30px;
		
	}
	.kehu-center{
		width: 120px;
		height: 25px;
	}
</style>
